<template>
  <div class="login_wrap">
    <div class="form_wrap">
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="loginData"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="用户名"
          prop="username"
          :rules="[
            {
              required: true,
              message: 'Please input your 用户名',
              trigger: 'blur',
            },
          ]"
        >
          <el-input
            v-model="loginData.username"
            type="username"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
          :rules="[
            {
              required: true,
              message: 'Please input your 密码 ',
              trigger: 'blur',
            },
          ]"
        >
          <el-input
            v-model="loginData.password"
            type="password"
            autocomplete="off"
            :type="password"
          />
        </el-form-item>

        <!-- <el-form-item> -->
        <el-button type="primary" class="login-btn" @click="commitLogin">
          登录
        </el-button>
        <!-- </el-form-item> -->
      </el-form>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
// import {useRouter } from "vue-router"
import { useStore } from "vuex";
export default {
  name: "login",
  setup() {
    const store = useStore();
    const router = useRouter();
    const count = store.state.number.count;
    const data = reactive({
      loginData: {
        username: "",
        password: "",
      },
      num: count,
    });
    const commitLogin = () => {
      if (
        data.loginData.username === "admin" &&
        data.loginData.password === "123456"
      ) {
        store.commit("setUserinfo", data.loginData);
        localStorage.setItem("loginData", JSON.stringify(data.loginData));
        // 跳转到 /user页面
        router.push({
          path: "/",
        });
      }
    };
    // const handleLogin = () => {
    //   // 请求后台接口
    //   // 默认用户：admin/123456
    //   loginApi(data.loginData).then((res) => {
    //     if (res.data) {
    //       store.commit("setUserinfo", res.data);
    //       localStorage.setItem("loginData", JSON.stringify(res.data));
    //       // 跳转到 /user页面
    //       router.push({
    //         path: "/",
    //       });
    //     }
    //   });
    // };
    return {
      ...toRefs(data),
      commitLogin,
      // handleLogin,
    };
  },
};
</script>
<style scoped>
.login_wrap {
  width: 100%;
  height: 100vh;
  background: rgba(56, 86, 139);
}
.form_wrap {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px 40px;
  border-radius: 5px;
  background: #fff;
}
.login-btn {
  margin: 10px auto;
  display: block;
}
</style>
